<template>
  <div class="NewQuipment">
    <div class="Title">
      <div class="blue"></div>
      <span class="title">设备新增</span>
      <el-button
        class="right-box"
        type="info"
        icon="el-icon-back"
        onclick="window.history.go(-1)"
      >返回</el-button>
    </div>
    <div class="newQuipment">
      <div class="newMessage">
        <p class="Headline">基本信息</p>
        <div class="up" :v-model="form">
          <div class="accMessage">
            <span class="accspan">设备型号</span>
            <el-input class="wb" v-model="form.equipmenttype"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">设备名称</span>
            <el-input class="wb" v-model="form.equipmentname"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">设备类别</span>
            <!-- <el-input class="wb" v-model="form.equipmentcategory"></el-input> -->
            <template>
              <el-select v-model="form.name" placeholder="请选择">
                <el-option
                  v-for="item in selectDatatype"
                  :value="item.no"
                  :label="item.name"
                  :key="item.name"
                ></el-option>
              </el-select>
            </template>
          </div>
          <div class="accMessage">
            <span class="accspan">下次保养日期</span>
            <el-input class="wbs" v-model="form.nextmaintenanceon"></el-input>
          </div>
           <div class="accMessage">
            <span class="accspan">生产商</span>
            <el-input class="wb" v-model="form.producers"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">提前提醒</span>
            <template>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in optionstBp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >></el-option>
              </el-select>
            </template>
          </div>
          <div class="accMessage">
            <span class="accspan">设备状态</span>
            <template>
              <el-select v-model="form.name" placeholder="请选择">
                <el-option
                  v-for="item in selectDataSta"
                  :value="item.no"
                  :label="item.name"
                  :key="item.name"
                ></el-option>
              </el-select>
            </template>
          </div>
        </div>
      </div>
      <div class="newMessage_low">
        <div class="newQuipmentLeft">
          <p class="Headline">设备信息</p>
          <div class="leftLow">
            <div class="Low">
              <span class="accspan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生产日期</span>
              <el-input class="wb" v-model="form.productionon"></el-input>
            </div>
            <div class="Low">
              <span class="accspan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;购置日期</span>
              <!-- <el-input class="wb" v-model="form.purchaseon"></el-input> -->
              <el-date-picker type="date" placeholder v-model="form.purchaseon" style="width:60%;"></el-date-picker>
            </div>
            <div class="Low">
              <span class="accspan">保养周期(月)</span>
              <!-- <el-input class="wb" v-model="form.maintenancecycle"></el-input> -->
              <el-date-picker
                type="date"
                placeholder
                v-model="form.maintenancecycle"
                style="width:60%;"
              ></el-date-picker>
            </div>
            <div class="Low">
              <span class="accspan">设备寿命(年)</span>
              <el-input class="wb" v-model="form.equipmentlife"></el-input>
            </div>
          </div>
          <div class="leftuplow">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="newQuipmentRight">
          <p class="Headline">维保记录</p>
          <div class="wbList">
            <el-table :data="tableData" stripe>
              <el-table-column prop="text" label="序号" align="center"></el-table-column>
              <el-table-column label="维修类别" align="center">
                <template>
                  <el-select v-model="form.name" placeholder="请选择">
                    <el-option
                      v-for="item in selectDatastyle"
                      :value="item.no"
                      :label="item.name"
                      :key="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop label="维修内容" align="center">
                <el-input></el-input>
              </el-table-column>
              <el-table-column prop label="维修日期" align="center">
                <div class="block">
                  <!-- <el-date-picker type="date" placeholder="选择日期"></el-date-picker> -->
                  <el-date-picker
                    type="date"
                    placeholder
                    v-model="form.maintenancecycle"
                    style="width:90%;"
                  ></el-date-picker>
                </div>
              </el-table-column>
              <el-table-column prop label="维修凭证" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="empphone_Btn">
      <el-form ref="form" :model="form" label-width="80px">
        <!-- <el-form-item> -->
        <el-button type="primary" @click="geiadd">确认</el-button>
        <el-button type="info" onclick="window.history.go(-1)">返回</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [
        {
          text: "1"
        },
        {
          text: "1"
        },
        {
          text: "1"
        }
      ],
      form: {},
      imageUrl: "",
      options: [
        {
          value: ""
        }
      ],
      value: "",
      optionstBp: [
        {
          value: "选项1",
          label: "1天"
        },
        {
          value: "选项2",
          label: "3天"
        },
        {
          value: "选项3",
          label: "7天"
        }
      ],
      selectDataSta: [],
      selectDatatype: [],
      selectDatastyle: []
    };
  },
  created() {
    this.getoption();
    this.gettype();
    this.getstyle();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 新增按钮
    geiadd() {
      var obj = {
        equipmenttype: this.form.equipmenttype,
        equipmentname: this.form.equipmentname,
        equipmentcategory: this.form.equipmentcategory,
        productionon: this.form.productionon,
        producers: this.form.producers,
        nextmaintenanceon: this.form.nextmaintenanceon,
        state: this.form.state,
        purchaseon: this.form.purchaseon,
        maintenancecycle: this.form.maintenancecycle,
        equipmentlife: this.form.equipmentlife,
        picpath: this.form.imageUrl
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/DeviceManagement.asmx/Save_Device?index=3&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        // var list = JSON.parse(datas.string.__text);
        if (datas.string.__text == "SUCCESS") {
          this.$message.success("SUCCESS");
          window.history.go(-1);
        } else {
          this.$message.error(datas.string.__text);
        }
      });
    },
    // 设备状态
    getoption() {
      axios(
        "/apis/CommondMethod.asmx/DropDown?index=1&member=" + "设备状态"
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var optionlist = JSON.parse(datas.string.__text);
        this.selectDataSta = optionlist;
      });
    },
    // 设备类别
    gettype() {
      axios(
        "/apis/CommondMethod.asmx/DropDown?index=1&member=" + "设备类别"
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var typelist = JSON.parse(datas.string.__text);
        this.selectDatatype = typelist;
      });
    },
    // 维修类别
    getstyle() {
      axios(
        "/apis/CommondMethod.asmx/DropDown?index=1&member=" + "维修类别"
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var stylelist = JSON.parse(datas.string.__text);
        console.log("111111");
        console.log(stylelist);
        this.selectDatastyle = stylelist;
      });
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.NewQuipment {
  width: 99%;
  //   height: 700px;
}
.Title {
  width: 99%;
  height: 35px;
  margin-top: 10px;
}
.blue {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  margin-left: 20px;
  margin-top: 5px;
  float: left;
}
.title {
  margin-left: 10px;
  line-height: 35px;
}
.newQuipment {
  width: 99%;
  height: 100%;
  margin-left: 15px;
  margin-top: 10px;
  //   border: 1px solid #000;
}
.newQuipmentLeft {
  width: 43%;
  min-height: 400px;
  display: inline-block;
  background-color: $white;
  border: 1px solid $linecolor;
}
.newQuipmentRight {
  width: 55%;
  // height: 500px;
  float: right;
  background-color: $white;
  border: 1px solid $linecolor;
  min-height: 400px;
}
.Headline {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  color: $fontcolor;
  padding-left: 15px;
  border-bottom: 1px solid $linecolor;
}
.newMessage {
  width: 98%;
  margin: 0 auto;
  background-color: $white;
  border: 1px solid $linecolor;
}
.newMessage_low {
  width: 98%;
  margin: 0 auto;
  margin-top: 15px;
  //   border: 1px solid #000;
}
.up {
  width: 99%;
  //   border: 1px solid red;
}
.accMessage {
  width: 19%;
  height: 50px;
  margin-top: 20px;
  margin-left: 15px;
  display: inline-block;
  min-width: 165px;
  // border: 1px solid #000;
  .el-select{
    width: 60%;
  }
}
.wb {
  width: 60%;
  // border: 1px solid #000;
}
.wbs {
  width: 55%;
}
.leftLow {
  width: 99%;
  margin-left: 14px;
  //   border: 1px solid #000;
}
.Low {
  width: 47%;
  display: inline-block;
  margin-top: 10px;
  // border: 1px solid #000;
  
}
.leftuplow {
  //   width: 49%;
  //   border: 1px solid #000;
  margin-left: 15px;
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px solid $linecolor;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  //   border: 1px solid #000;
  display: block;
}
.empphone_Btn {
  width: 99%;
  height: 100px;
  margin-top: 30px;
  text-align: center;
  // border: 1px solid #000;
}
.right-box {
  float: right;
  margin-right: 2%;
  border-radius: 5px;
}
.wbList {
  width: 99%;
  // border: 1px solid #000;
}
.block {
  // width: 90%;
  // border: 1px solid #000;
}
.el-date-editor.el-input {
  width: 95%;
}
.el-select {
  width: 70%;
}
</style>
